<template>
  <div class="udp-header-message">
    <n-popover trigger="click" :style="{ width: '300px' }">
      <template #trigger>
        <n-badge value="2">
          <Icon src="self-mx-notice" style="color: #fff" />
        </n-badge>
      </template>
      <n-tabs type="line" justify-content="space-evenly">
        <n-tab-pane name="oasis" tab="通知">
          <n-list>
            <n-list-item v-for="(v, i) in noticeList" :key="i" :class="v.class">
              <template #prefix>
                <Icon :src="v.icon" />
              </template>
              <n-thing>
                <template #header>{{ v.title }}</template>
                <template #description>{{ v.time }}</template>
              </n-thing>
            </n-list-item>
          </n-list>
        </n-tab-pane>
        <n-tab-pane name="the beatles" tab="消息" >
          消息
        </n-tab-pane>
      </n-tabs>
    </n-popover>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import Icon from 'udp/components/tools/icon'
  export default defineComponent({
    name: 'HeaderMessage',
    components: { Icon },
    setup() {
      const noticeList = ref([
        {
          title: '你收到了 14 份新周报',
          time: '一年前',
          icon: 'self-mx-page',
          class: 'blue'
        },
        {
          title: '通知消息内容',
          time: '一年前',
          icon: 'self-mx-page',
          class: 'orange'
        },
        {
          title: '其他消息内容',
          time: '02-12 12:00',
          icon: 'self-mx-page',
          class: 'green'
        },
        {
          title: '当消息内容比较长时的展示样式参考',
          time: '02-12 12:00',
          icon: 'self-mx-page',
          class: 'red'
        }
      ])
      return {
        noticeList
      }
    }
  })
</script>

<style lang="less" scoped>
  :deep(.n-list .n-list-item .n-list-item__prefix) {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    font-size: 18px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    flex: inherit;
  }

  .blue :deep(.n-list-item__prefix) {
    background: #4499e9;
  }

  .orange :deep(.n-list-item__prefix) {
    background: #ff8300;
  }

  .green :deep(.n-list-item__prefix) {
    background: #2fce90;
  }

  .red :deep(.n-list-item__prefix) {
    background: #cc0100;
  }

  :deep(.n-list .n-list-item:not(:last-child)) {
    border: none;
  }

  :deep(.n-thing .n-thing-main .n-thing-header .n-thing-header__title) {
    font-size: 14px;
    line-height: 19px;
    color: var(--n-text-color);
  }

  :deep(.n-thing .n-thing-main .n-thing-main__description) {
    font-size: 12px;
    color: var(--n-title-text-color);
  }

  :deep(.n-badge) {
    font-size: 24px;
  }

  .udp-header-message {
    cursor: pointer;
  }
</style>
